<template>
    <div>
        <div style="margin-top:10px">
            <el-button icon="el-icon-plus" type="primary" @click="addData"
                       v-if="typeof(defaultOperation)==='undefined' || defaultOperation.indexOf('add')!=-1">新增
            </el-button>
            <el-button icon="el-icon-close" type="danger" @click="deleteAny" v-if="deleteAllMethod">删除</el-button>
            <el-button :icon="item.icon" :type="item.type" @click="otherTableMethod(item.method)"
                       v-for="item in otherOperation">{{item.title}}
            </el-button>
        </div>
        <div class="query-form">
            <table-search-form :table-search-form-param="tableSearchFormParam"
                               @searchTableData="searchTableData"></table-search-form>
        </div>
        <br/>
        <el-table
                :data="tableData"
                border
                empty-text="暂无数据"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                v-loading="tableLoading">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    width="35">
            </el-table-column>
            <el-table-column
                    v-for="item in tableColumns"
                    :key="item.name"
                    :label=item.label
                    :property=item.name
                    :width=item.width>
            </el-table-column>
            <el-table-column label="操作" width="100" align="center" v-if="showType=='dropdown'">
                <template slot-scope="scope">
                    <el-dropdown trigger="click" placement="bottom">
                        <el-button plain>
                            操作<i class="el-icon-caret-bottom el-icon--right"/>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <el-button
                                        size="small"
                                        type="success"
                                        icon="el-icon-edit"
                                        v-if="typeof(defaultOperation)==='undefined' || defaultOperation.indexOf('edit')!=-1"
                                        @click="editData(scope.$index, scope.row)">编&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;辑
                                </el-button>
                            </el-dropdown-item>
                            <el-dropdown-item divided v-if="deleteSingleMethod">
                                <el-button
                                        size="small"
                                        type="danger"
                                        icon="el-icon-close"
                                        v-if="deleteSingleMethod"
                                        @click="deleteData(scope.$index, scope.row)">删&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;除
                                </el-button>
                            </el-dropdown-item>
                            <el-dropdown-item divided v-for="item in tableOperation"
                                              v-if="typeof (item.isPermission)==='undefined' || typeof (item.isPermission)!='undefined' && item.isPermission">
                                <el-button
                                        size="mini"
                                        :type="item.type"
                                        :icon="item.icon"
                                        @click="tableMethod(scope.$index, scope.row,item.method)">{{item.title}}
                                </el-button>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
            <el-table-column label="操作" :width="typeof(tableOperationWidth)==='undeifned'?'':tableOperationWidth"
                             v-else>
                <template slot-scope="scope">
                    <el-button
                            size="small"
                            type="success"
                            icon="el-icon-edit"
                            v-if="typeof(defaultOperation)==='undefined' || defaultOperation.indexOf('edit')!=-1"
                            @click="editData(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="small"
                            type="danger"
                            icon="el-icon-close"
                            v-if="deleteSingleMethod"
                            @click="deleteData(scope.$index, scope.row)">删除
                    </el-button>
                    <el-button
                            size="mini"
                            v-for="item in tableOperation"
                            :type="item.type"
                            :icon="item.icon"
                            v-if="typeof (item.isPermission)==='undefined' || typeof (item.isPermission)!='undefined' && item.isPermission"
                            @click="tableMethod(scope.$index, scope.row,item.method)">{{item.title}}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page=this.currentPage
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size=this.pageSize
                    layout="total, sizes, prev, pager, next, jumper"
                    :total=this.total>
            </el-pagination>
        </div>
    </div>
</template>
<style scoped>
    .query-form {
        border-bottom: 1px solid #ebeef5;
        padding-top: 25px;
    }

    .page {
        text-align: center;
        margin-top: 20px;
    }
</style>

<script>
  import TableSearchForm from '../TableSearchForm'

  export default {
    name: 'LemonETable',
    components: { TableSearchForm },
    props: {
      listMethod: Function,
      getMethod: Function,
      deleteSingleMethod: Function,
      deleteAllMethod: Function,
      //searchColumns: Array,
      tableColumns: Array,
      tableSearchFormParam: Object,
      tableOperation: Array,
      tableOperationWidth: String,
      showType: String,
      otherOperation: Array,
      defaultOperation: Array
    },
    created() {

    },
    data() {
      return {
        tableLoading: true,
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        tableSearchParam: {},
        multipleSelection: []
      }
    },
    methods: {
      listTableData() {
        this.tableLoading = true
        this.listMethod(this.tableSearchParam, this.currentPage, this.pageSize, (res) => {
          this.tableData = res.list
          this.total = res.total
          this.tableLoading = false
        }, () => {

        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.listTableData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.listTableData()
      },
      searchTableData(param) {
        this.tableSearchParam = param
        this.listTableData()
      },
      addData() {
        this.$emit('addData')
      },
      editData(index, row) {
        this.$emit('editData', row)
      },
      deleteData(index, row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteSingleMethod(row.id, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.listTableData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      deleteAny() {
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择记录!'
          })
          return
        }
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteAllMethod(this.multipleSelection, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.listTableData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = []
        for (var ms of val) {
          this.multipleSelection.push(ms.id)
        }
      },
      tableRowClick(row, event, column) {
        this.$emit('row', row)
      },
      tableMethod(index, row, method) {
        method(index, row)
      },
      otherTableMethod(method) {
        method()
      }
    }
  }
</script>
